<template>
  <view class="container">
 

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="hirelist"
        :rules="rules"
        ref="product"
      >
	  
	  <!-- 名称 -->
	  <u-form-item label="标题" prop="name">
	    <u-input
	      v-model="hirelist.name"
	      ref="name"
	      placeholder="请输入标题"
	    />
	  </u-form-item>
	  
	  
	  <u-form-item label="最大值" prop="max">
	    <u-input
	      v-model="hirelist.max"
	      ref="max"
	      placeholder="请填写最大值"
	    />
	  </u-form-item>
	  
	  
	  <u-form-item label="最小值" prop="min">
	    <u-input
	      v-model="hirelist.min"
	      ref="min"
	      placeholder="请填写最小值"
	    />
	  </u-form-item>
	  
        <!-- 部门 -->
        <u-form-item
          label="左边"
          prop="store"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="hirelist.store.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择左边"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        
        
          <u--input
            v-model="hirelist.spdate_text"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 品牌 -->
		
		
        <u-form-item
          label="右边"
          prop="brank"
          borderBottom
          @click="showbrank = true"
        >
          <u-input
            v-model="hirelist.brank.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择右边"
            border="none"
          ></u-input>
		  
		  
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

 
        <u-form-item label="保险图片:">
          <u-upload
            ref="product_img"
            name="product_img"
            maxCount="1"
            :fileList="filelist1"
            width="100"
            height="100"
            @delete="delxsz"
            @afterRead="readxsz"
          />
        </u-form-item>
  

        <u-action-sheet
          :show="showstore"
          :actions="stolist"
          title="请选择左边"
          @close="showstore = false"
          @select="storeSelect()"
        >
        </u-action-sheet>
		
		
     
        <u-action-sheet
          :show="showbrank"
          :height="'600px'"
          :actions="branklist"
          title="请选择右边"
          @close="showbrank = false"
          @select="brankSelect()"
        >
        </u-action-sheet>
 
   
        <!-- 提交按钮 -->
        <u-button
          text="增加盲盒"
          icon="pushpin"
          size="small"
          type="success"
          @click="product1"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();

    this.brank();

    this.storelist();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      showsellcolumn:false,
      filelist: [],
      sellcolumnlist: [
        {
          sellcolumn: 0,
          name: "正常",
        },
        {
          sellcolumn: 1,
          name: "推荐",
        },
      ],
      showstore: false,
      auth: {},
      branklist: [],
      brank_text: "",
      piclist: [], 
      imageslist: [],
      store_text: "",
      stolist: [],
      stoid: null,
      brand_id: 0,
      product_img: "",
      filelist1: [],
      piclist1: '',
      name: "",
      hirelist: {
        brank: {
          name: "",
        },
        store: {
          name: "",
        },
      },
      showbrank: false,
      registrationTime: "",
      param2: "",
      commission: "",
      servicefree: 0,
      description: "",
      showCalendar: false,
      price: 0,
      rules: {
        description: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },
        "store.name": {
          required: true,
          message: "请选择左边",
          trigger: ["blur", "change"],
        },
        "brank.name": {
          required: true,
          message: "请选择右边",
          trigger: ["blur", "change"],
        },
        name: {
          required: true,
          message: "请填写标题",
          trigger: ["blur", "change"],
        },
 
        max: {
          required: true,
          message: "最大值",
          trigger: ["blur", "change"],
        },
        min: {
          required: true,
          message: "最小值",
          trigger: ["blur", "change"],
        },
 
 
        spdate_text: {
          type: "string",
          min: 2,
          required: true,
          message: "请选择上牌时间",
          trigger: ["change"],
        },
      },
    };
  },

  methods: {
    calendarConfirm(e) {
      this.showCalendar = false;
      this.hirelist.spdate_text = `${e[0]} / ${e[e.length - 1]}`;

      //   this.$refs.product.validateField("registrationTime");
    },
    calendarClose() {
      this.showCalendar = false;
      this.$refs.product.validateField("registrationTime");
    },
    del(e) {
      let list = this.filelist.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.hire.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
                if ((e.index = 0 && index == 0)) {
                  this.filelist = [];
                }
                this.info();
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        //修改本地存储中的图像内容
        this.product_img = result.data;
		
		console.log(product_img);

        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          let str = item.value.url.slice(24, 200);
          // 把想要的路径追加到数组
          this.piclist.push(str);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.product_img = qcarr.join(",");

        console.log(this.product_img);
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
   
    delxsz(e) {
      let list = this.filelist1.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist1.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.blind.delxsz(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
				  
                if (e.index == 0 && index == 0) {
				
                  this.filelist1 = [];
                }
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    async readxsz(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);
	  
	   

      if (result.code) {
        // 合并对象
        this.filelist1 = this.filelist1.concat({ url: result.data });

        let userArray = Object.entries(this.filelist1).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          let str = item.value.url.slice(24, 200);
	 
          // 把想要的路径追加到数组
          this.piclist1=str;
        });
       
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    sellcolumnSelect(e) {
      this.hirelist.sellcolumn_text = e.name;
      this.hirelist.sellcolumn = e.sellcolumn;
    },
    branktypeSelect(e) {
      this.hirelist.btypename_text = e.name;
      this.hirelist.btypeid = e.id;
    },
    brankSelect(e) {
      this.hirelist.brank.name = e.name;
      this.brand_id = e.id;
    },
    storeSelect(e) {
		
      this.hirelist.store.name = e.name;
	  
	   
      this.stoid = e.id;
    },
    product1() {
      this.$refs.product
        .validate()
        .then(async () => {
          let data = {
             
            name: this.hirelist.name,
			min: this.hirelist.min,
			max: this.hirelist.max,
			inleft: this.stoid,
            inright: this.brand_id,
            thumb: this.piclist1,
           
          };
 
		console.log(data)

          let result = await this.$u.api.blind.add(data);

          if (result.code) {
			   
            this.tjdata = [];
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.reLaunch({
                  url: "/pagesC/product/blind/index",
                });
              },
            });
          } else {
            this.tjdata = [];
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
 
    async storelist() {
      let data = {
        adminid: this.auth.id,
        //stoid: this.auth.stoid,
      };
      let result = await this.$u.api.blind.storelist(data);

      if (result.code) {
        this.stolist = result.data;
		 
      }
    },
    async brank() {
      let result = await this.$u.api.blind.branklist();
	  
      if (result.code) {
        this.branklist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
  },
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}
</style>
  